<template>
  <div class="electTable">
    <el-table
      :data="tableData"
      ref="selection"
      :header-cell-style="{
        background: '#f2f2f2',
        color: '#333',
        fontSize: '12px',
      }"
      size="mini"
      height="200px"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="fenceConfigName"
        label="围栏名称"
        width="120"
        align="center"
      >
        <!-- <template slot-scope="scope">
          {{
            scope.row.fence_type == "zw_m_marker"
              ? "标注"
              : scope.row.fence_type == "zw_m_line"
              ? "追加"
              : scope.row.fence_type == "rectangle"
              ? "矩形"
              : scope.row.fence_type == "polygon"
              ? "多边形"
              : scope.row.fence_type == "circle"
              ? "圆形"
              : scope.row.fence_type == "zw_m_administration"
              ? "行政区域"
              : scope.row.fence_type == "zw_m_travel_line"
              ? "行驶路线"
              : ""
          }}
        </template> -->
      </el-table-column>
      <el-table-column
        prop="carNo"
        label="监控对象"
        width="120"
        align="center"
      />
      <el-table-column
        prop="sendFenceType"
        label="下发类型"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{
            scope.row.sendType == 0
              ? "更新"
              : scope.row.sendType == 1
              ? "追加"
              : scope.row.sendType == 2
              ? "修改"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="alarmSource"
        label="报警来源"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{
            scope.row.alarmSource == 1
              ? "终端报警"
              : scope.row.alarmSource == 2
              ? "平台报警"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="alarmStartTime"
        label="开始时间"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="alarmEndTime"
        label="结束时间"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="alarmIn"
        label="驶入报警给平台"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.alarmIn"
            disabled
            class="demo"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="alarmOut"
        label="驶出报警给平台"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.alarmOut"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="AlarmInDriver"
        label="驶入报警给驾驶员"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.alarmInDriver"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="AlarmOutDriver"
        label="驶出报警给驾驶员"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.alarmOutDriver"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="maxSpeed"
        label="最高速度(km/h)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="overSpeedLastTime"
        label="超速持续时间(s)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="travelLongTime"
        label="行驶时间过长阈值(s)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="travelSmallTime"
        label="行驶时间不足阈值(s)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="openDoor" label="允许开门">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.openDoor"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="communicationFlag"
        label="进区域开启通信模块"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.communicationFlag"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="gnssFlag"
        label="进区域不采集GNSS详细定位数据"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.gnssFlag"
            class="demo"
            disabled
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
  </div>
</template>

<script>
import api from "@/api/location/fence";

export default {
  props: {
    height: {},
  },
  data() {
    return {
      page: {
        // paget
        pageSize: 10,
        pageNumber: 1,
        getList: this.getData,
      },
      tableData: [],
      count: 0,
      str: "",
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getData(this.page);
    },
    getData(page) {
      console.log(page, "page");
      console.log(this.str, "this.str");
      if (!this.str) {
        this.tableData = [];
        this.count = 0;
        return false;
      }
      let params = {
        pageNum: page.pageNumber ? page.pageNumber : 1,
        pageSize: page.pageSize,
        fenceIds: this.str,
        // 'sidx':'orderNo'
      };
      api
        .fenceCarPage(params)
        .then((res) => {
          let result = res.rows;
          this.count = res.total;
          // this.page.pageNumber = result.current_page;
          this.tableData = result;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table--fluid-height {
  max-height: 150px;
}

// 样式
.demo >>> .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
  font-size: 12px;
}
/*打开时文字位置设置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: 21px;
}
/*关闭时文字位置设置*/
.demo >>> .el-switch__label--left {
  z-index: 1;
  left: 19px;
}
/*显示文字*/
.demo >>> .el-switch__label.is-active {
  display: block;
}
// .demo >>> .el-switch .el-switch__core,
// .el-switch .el-switch__label {
//   width: 50px !important;
// }
</style>

